<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                attributeName="r"
                from="50"
                to="100"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
        <animate
                attributeName="fill"
                from="#afe"
                to="#f3c"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
    </circle>
</svg>

<!--二、动画常用属性
SVG常用动画属性
repeatCount：动画重复执行次数
repeatDur：动画重复执行总时间
begin：规定动画开始的时间/什么时间触发了再执行动画
begin=“1s”：1s后开始执行动画
begin=“click”：click触发事件执行了再执行动画
begin=“click + 1s”：点击之后，等两秒再执行动画
restart: 规定元素开始动画之后，是否可以被重新开始执行
always：动画可以在任何时候被重置。这是默认值。
whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后，才能再执行。
never：在整个SVG执行的过程中，元素动画不能被重置。
calcMode: 规定每一个动画片段的动画表现
linear：默认属性值, 匀速动画
discrete: 非连续动画, 没有动画效果瞬间完成
paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画
keyTimes:
划分动画时间片段, 取值0-1
values:
划分对应取值片段的值-->